<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../imgs/favicon-mi.ico">
    <title>小米商城</title>
    <style>
        .container{
            /* background-color: azure; */
            position: relative;
            width: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
        .logo-d{
            /* background-color:aquamarine; */
            height: 56px;
            width: 56px;
            background-image: url(../imgs/logo-mi2.png);
            background-size: 56px;
            position: absolute;
            margin-top: 25px;
        }
        .logo-d>a{
            display: inline-block;
            /* background-color:aquamarine; */
            height: 56px;
            width: 56px;
        }
        .header-nav{
            /* background-color: aquamarine; */
            position: absolute;
            /* float: left; */
            left:56px;
            width: 850px;
            height: 100px;
            margin: 0;
            padding: 12px 0 0 30px;
            list-style-type: none;
            font-size: 16px;
        }
        .header-nav>ul{
            /* background-color:beige; */
            height: 100px;
            width: 1130px;
            margin: 0;
            padding-left: 0;
        }
        .li-nav{
            /* background-color: bisque; */
            /* border: 1px solid; */
            width: 50px;
            list-style: none;
            float: left;
            /* display: inline-block; */
            height: 88px;
            padding: 7px;
            box-sizing: border-box;
            padding-top: 30px;
        }
        #li1{
            width: 142px;
            height: 88px;
        }
        #li2{
            width: 100.91px;
            height: 88px;
        }
        #li3{
            width: 103.56px;
            height: 88px;
        }
        #li4{
            width: 52px;
            height: 88px;
        }
        #li5{
            width: 68px;
            height: 88px;
        }
        #li6{
            width: 52px;
            height: 88px;
        }
        #li7{
            width: 52px;
            height: 88px;
        }
        #li8{
            width: 68px;
            height: 88px;
        }
        #li9{
            width: 84px;
            height: 88px;
        }
        #li10{
            width: 52px;
            height: 88px;
        }
        .s1{
            /* background-color: aqua; */
            /* float: left; */
            position: absolute;
            width: 400px;
            height: 50px;
            left: 820px;
            /* clear: both; */
        }
        .s1>.ss1{
            box-sizing: border-box;
            margin-left: 45px;
            /* color: #ccc; */
            /* border-color: #ccc; */
            margin-top: 20px;
            width: 240px;
            height: 50px;
            display: inline-block;
            font-size: 18px;
            margin-right: -5px;
        }
        .s1>.ss2{
            box-sizing: border-box;
            background-color: white;
            /* margin-top: 20px; */
            padding: 0;
            width: 50px;
            height: 50px;
            display: inline-block;
            margin-left: 0;
        }
        .s1>.ss2:hover{
            background-color: orange;
        }
        .s2{
            position: absolute;
            top: 100px;
            width: 100%;
            height: 300px;
            background-color:blanchedalmond ;
            display: none;
        }
        .li-nav:hover{
            color: aqua;
        }
        .li-nav:hover .s2{
            display: block;
            color: orange;
        }
        .goods{
            position: relative;
            /* margin-top: 50px; */
            padding-top: 30px;
        }
        .out{
            position: relative;
            background-color: aliceblue;
            width: 1226px;
            height: 460px;
            left: 145px;
            top: 80px;
        }
        .in1{
            position: absolute;
            background-color: #000;
            height: 460px;
            width: 250px;
            background: rgba(105, 101, 101, .6);
            z-index: 1;
        }
        .in2{
            position: absolute;
            left: 0px;
            height: 460px;
            width: 1226px;
            background-color: aquamarine;
            background-image: url(../imgs/m1.jpg);
            background-size: 1226px;
            /* background-size: cover; */

            animation: img 10s linear infinite;
        }
        @keyframes img{
            0%{
                background-image: url(../imgs/m1.jpg);
            }
            20%{
                background-image: url(../imgs/m2.webp);
            }
            40%{
                background-image: url(../imgs/m3.webp);
            }
            60%{
                background-image: url(../imgs/m4.webp);
            }
            80%{
                background-image: url(../imgs/m5.webp);
            }
            100%{
                background-image: url(../imgs/m6.webp);
            }
        }
        .uu{
            padding-left: 0;
            padding-top: 20px;
        }
        .uu>li{
            color: white;
            list-style: none;
            padding: 9px;
            padding-left: 30px;

        }
        .uu>li:hover{
            background-color:darkorange;
        }
        .uu span{
            /* margin-right: 0; */
            padding-top: 10px;
            padding-right: 20px;
            color:white;
            float: right;
        }
        .in3{
            position: absolute;
            top: 0;
            left: 250px;
            height: 460px;
            width: 876px;
            background-color:white;
            background-image: url(../imgs/猫.jpg);
            background-size: 876px 460px;
            z-index: 10;
            opacity: 1;
            display: none;
        }
        .uu:hover + .in3,
        .in3:hover {
            display: block;
            opacity: 1;
        }
        .d3{
            position: relative;
            width: 1226px;
            height: 180px;
            left: 145px;
            top: 100px;
            /* background-color: aqua; */

        }
        .d3 .dd1{
            position: absolute;
            width: 250px;
            height: 180px;
            background-color: aquamarine;
            background-image: url(../imgs/猫.jpg);
            background-size: 250px 180px;
        }
        .d3 .dd2{
            position: absolute;
            width: 310px;
            height: 180px;
            left: 265px;
            background-color: aquamarine;
            background-image: url(../imgs/m7.png);
            background-size: 310px 180px;
        }
        .d3 .dd3{
            position: absolute;
            width: 310px;
            height: 180px;
            right: 325px;
            background-color: aquamarine;
            background-image: url(../imgs/m8.png);
            background-size: 310px 180px;
        }
        .d3 .dd4{
            position: absolute;
            width: 310px;
            height: 180px;
            right: 0;
            background-color: aquamarine;
            background-image: url(../imgs/m9.png);
            background-size: 310px 180px;
        }
        .body1{
            width: 100%;
            height: 800px;
            /* background-color: white; */
            /* background-color: antiquewhite; */
        }
        .body2{
            position: relative;
            width: 1226px;
            height: 120px;
            left: 175px;
            background-color: aquamarine;
            background-image: url(../imgs/m11.webp);
            background-size: 1226px;
        }
        .body3{
            position: relative;
            width: 1226px;
            height: 628px;
            left: 175px;
            /* background-color: white; */
        }
        .body3>.b31{
            position: absolute;
            width: 250px;
            height: 628px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m12.webp);
            background-size: 250px;
        }
        .body3>.b32{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 260px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .body3>.b33{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 260px;
            top: 319px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .body3>.b34{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 504px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .body3>.b35{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 504px;
            top: 319px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .body3>.b36{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 748px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .body3>.b37{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 748px;
            top: 319px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .body3>.b38{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 992px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .body3>.b39{
            position: absolute;
            width: 234px;
            height: 309px;
            left: 992px;
            top: 319px;
            display: inline-block;
            background-color: aqua;
            background-image: url(../imgs/m14.png);
            background-size: 234px;
        }
        .b41{
            display: inline-block;
            height: 10px;
            margin-left: 175px;
            font-size: 20px;
        }
        .b42{
            display: inline-block;
            margin-left: 1100px;
        }
        .d3 div {
            transition: transform 0.5s, box-shadow 0.5s;
        }

        .d3 div:hover {
            box-shadow: 3px 3px 5px #ccc;
            transform: translateY(-2px);
        }
        .body3 div {
            transition: transform 0.5s, box-shadow 0.5s;
        }

        .body3 div:hover {
            box-shadow: 3px 3px 5px #ccc;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <div class="body1">
    <div class="header">
    </div>
    <div class="container">
        <div class="logo-d">
            <a href="//www.mi.com" title="小米官网" class="logo-a"></a>
        </div>
        <div class="header-nav">
            <ul>
                <li class="li-nav" id="li1"></li>
                <li class="li-nav" id="li2">Xiaomi手机</li>
                <li class="li-nav" id="li3">REDMI手机</li>
                <li class="li-nav" id="li4">电视</li>
                <li class="li-nav" id="li5">笔记本</li>
                <li class="li-nav" id="li6">平板</li>
                <li class="li-nav" id="li7">家电</li>
                <li class="li-nav" id="li8">路由器</li>
                <li class="li-nav" id="li9">服务中心</li>
                <li class="li-nav" id="li10">社区</li>
                <div class="s1">
                    <input type="text" placeholder="ipad" class="ss1">
                    <input type="submit" value="🔍" class="ss2">
                </div>
            </ul>
        </div>
        <div class="s2">商品内容</div>
    </div>
    <div class="goods">
        <div class="out" style="margin-left: 30px;">
            <div class="in1">
                <ul class="uu">
                    <span>></span>
                    <li>手机</li><span>></span>
                    <li>电视</li><span>></span>
                    <li>家电</li><span>></span>
                    <li>笔记本 平板 显示器</li><span>></span>
                    <li>出行 穿戴</li><span>></span>
                    <li>耳机 音响</li><span>></span>
                    <li>健康 儿童</li><span>></span>
                    <li>生活 箱包</li><span>></span>
                    <li>智能 路由器</li><span>></span>
                    <li>电源 配件</li>
                </ul>
                <div class="in3">
                    <h2 style="margin-left: 100px; margin-top: 100px;">这里是产品</h2>
                </div>
            </div>
            <div class="in2"></div>
        </div>
    </div>
    <div class="d3" style="margin-left: 30px;">
        <div class="dd1"></div>
        <div class="dd2"></div>
        <div class="dd3"></div>
        <div class="dd4"></div>
    </div>
    </div>
    <div class="body2">
    </div>
    <div class="body4">
        <div class="b41">手机</div>
        <div class="b42">查看更多 ></div>
    </div>
    <div class="body3">
        <div class="b31"></div>
        <div class="b32"></div>
        <div class="b33"></div>
        <div class="b34"></div>
        <div class="b35"></div>
        <div class="b36"></div>
        <div class="b37"></div>
        <div class="b38"></div>
        <div class="b39"></div>
    </div>
</body>
</html>